// const middle=()=>{
//     console.log(1)
// }
const middle = {
    install(Vue) {
        function createEl({list=[],page}) {
            let Res = Vue.extend({
                data() {
                    return {
                        name: "yws",
                        page,
                        list,
                        newlist:[]
                    };
                },
                mounted () {
                    this.newlist=this.list.slice(0,5)
                },
                template: `<div>
                    <div class="item" v-for="(item,index) in newlist" :key="index">
                        <h3>姓名</h3><h3>{{item.name}}</h3><h3>年龄</h3><h3>{{item.age}}</h3><h3>性别</h3><h3>{{item.sex}}</h3>
                    </div>
                    <select @change="changeItem" class='sle'>
                        <option v-for="(item,index) in page" :key="index">{{item}}</option>
                    </select>
                </div>`,
                methods: {
                    changeItem() {
                        let sle = document.querySelector(".sle");
                        this.newlist=this.list.slice(0,sle.value)
                    },
                },
                
            });
            let res = new Res();
            let box = document.querySelector("#box");
            res.$mount(box);
        }
        Vue.prototype.$createEl = createEl;
    },
};

export default middle;